<template>
  <div class="min_box">
    <a-tabs v-model:activeKey="activeKey" @change="changeTab">
      <a-tab-pane key="1" tab="日报表"></a-tab-pane>
      <a-tab-pane key="2" tab="月报表" force-render></a-tab-pane>
      <a-tab-pane key="3" tab="年报表"></a-tab-pane>
    </a-tabs>

    <div>
      <a-row>
        <a-col :span="8">
          <a-date-picker
            v-if="activeKey == '1'"
            v-model:value="dateValue"
            :valueFormat="valueFormat"
            placeholder="选择数据"
          />
          <a-month-picker
            v-else-if="activeKey == '2'"
            v-model:value="dateValue"
            :valueFormat="valueFormatmonth"
            placeholder="选择数据"
          />
          <a-select v-else v-model:value="dateValue" style="width: 120px">
            <a-select-option
              v-for="(item, index) in dateOptions"
              :key="index"
              :value="item"
              >{{ item }}</a-select-option
            >
          </a-select>
          <a-button
            style="margin: 0 20px"
            type="primary"
            @click="handleGetStatusReport"
            >查询</a-button
          >
          <a-button>重置</a-button>
        </a-col>
        <a-col :span="8" :offset="8" style="text-align: right">
          <a-button type="primary"  :disabled="tabledata.length === 0 ? true : false" @click="handleExport">导出</a-button>
        </a-col>
      </a-row>

      <a-row style="margin: 20px 0" justify="space-around" align="middle">
        <a-col :span="7">
          <div class="s-d-flex s-ai-center bg1">
            <div>
              <img class="w52 h52" src="../../../assets/icon001.png" alt="" />
            </div>
            <div class="ml30">
              <div class="fz16">生产(kg)</div>
              <div class="fz24 mt12 ff">
                {{ statusReport[0].weight }}
              </div>
            </div>
            <div class="ml50">
              <div class="fz16">数量(袋)</div>
              <div class="fz24 mt12 ff">
                {{ statusReport[0].count }}
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="7">
          <div class="s-d-flex s-ai-center bg2">
            <div>
              <img class="w52 h52" src="../../../assets/icon002.png" alt="" />
            </div>
            <div class="ml30">
              <div class="fz16">入库(kg)</div>
              <div class="fz24 mt12 ff">
                {{ statusReport[1].weight }}
              </div>
            </div>
            <div class="ml50">
              <div class="fz16">数量(袋)</div>
              <div class="fz24 mt12 ff">
                {{ statusReport[1].count }}
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="7">
          <div class="s-d-flex s-ai-center bg3">
            <div class="ml30">
              <img class="w52 h52" src="../../../assets/icon003.png" alt="" />
            </div>
            <div class="ml30">
              <div class="fz16">出库(kg)</div>
              <div class="fz24 mt12 ff">
                {{ statusReport[2].weight }}
              </div>
            </div>
            <div class="ml50">
              <div class="fz16">数量(袋)</div>
              <div class="fz24 mt12 ff">
                {{ statusReport[2].count }}
              </div>
            </div>
          </div>
        </a-col>
      </a-row>

      <a-row style="margin: 10px 0" justify="space-around" align="middle">
        <a-col :span="4" class="flexBox">
          <div class="bg01"></div>
          <div>
            <span style="margin: 0 10px">感染性废物</span>
            <span
              >{{ classifyReportObj.obj1 ? classifyReportObj.obj1 : 0 }}%</span
            >
          </div>
        </a-col>
        <a-col :span="4" class="flexBox">
          <div class="bg02"></div>
          <span style="margin: 0 10px">损伤性废物</span>
          <span
            >{{ classifyReportObj.obj2 ? classifyReportObj.obj2 : 0 }}%</span
          >
        </a-col>
        <a-col :span="4" class="flexBox">
          <div class="bg03"></div>
          <span style="margin: 0 10px">病理性废物</span>
          <span
            >{{ classifyReportObj.obj3 ? classifyReportObj.obj3 : 0 }}%</span
          >
        </a-col>
        <a-col :span="4" class="flexBox">
          <div class="bg04"></div>
          <span style="margin: 0 10px">药物性废物</span>
          <span
            >{{ classifyReportObj.obj4 ? classifyReportObj.obj4 : 0 }}%</span
          >
        </a-col>
        <a-col :span="4" class="flexBox">
          <div class="bg05"></div>
          <span style="margin: 0 10px">化学系废物</span>
          <span
            >{{ classifyReportObj.obj5 ? classifyReportObj.obj5 : 0 }}%</span
          >
        </a-col>
      </a-row>

      <a-table :data-source="tabledata">
        <a-table-column key="departName" title="科室" data-index="departName" />
        <a-table-column-group>
          <template #title><span>医废总量</span></template>
          <a-table-column key="allCount" data-index="allCount">
            <template #title><span>数量(袋)</span></template>
          </a-table-column>
          <a-table-column
            key="allWeight"
            title="重量(KG)"
            data-index="allWeight"
          />
        </a-table-column-group>
        <a-table-column-group>
          <template #title><span>感染性废物</span></template>
          <a-table-column key="infectionCount" data-index="infectionCount">
            <template #title><span>数量(袋)</span></template>
          </a-table-column>
          <a-table-column
            key="infectionWeight"
            title="重量(KG)"
            data-index="infectionWeight"
          />
        </a-table-column-group>
        <a-table-column-group>
          <template #title><span>病理性废物</span></template>
          <a-table-column key="pathologyCount" data-index="pathologyCount">
            <template #title><span>数量(袋)</span></template>
          </a-table-column>
          <a-table-column
            key="pathologyWeight"
            title="重量(KG)"
            data-index="pathologyWeight"
          />
        </a-table-column-group>
        <a-table-column-group>
          <template #title><span>损伤性废物</span></template>
          <a-table-column key="injuryCount" data-index="injuryCount">
            <template #title><span>数量(袋)</span></template>
          </a-table-column>
          <a-table-column
            key="injuryWeight"
            title="重量(KG)"
            data-index="injuryWeight"
          />
        </a-table-column-group>
        <a-table-column-group>
          <template #title><span>药理性废物</span></template>
          <a-table-column key="drugCount" data-index="drugCount">
            <template #title><span>数量(袋)</span></template>
          </a-table-column>
          <a-table-column
            key="drugWeight"
            title="重量(KG)"
            data-index="drugWeight"
          />
        </a-table-column-group>
        <a-table-column-group>
          <template #title><span>化学性废物</span></template>
          <a-table-column key="chemicalCount" data-index="chemicalCount">
            <template #title><span>数量(袋)</span></template>
          </a-table-column>
          <a-table-column
            key="chemicalWeight"
            title="重量(KG)"
            data-index="chemicalWeight"
          />
        </a-table-column-group>
      </a-table>
    </div>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, ref, toRef, toRefs } from "vue";
import * as Utils from "@/utils/index";
import * as medicalWasteApi from "@/api/medicalWaste";
const dateOptions = [
  "2024",
  "2023",
  "2022",
  "2021",
  "2020",
  "2019",
  "2018",
  "2017",
];
export default defineComponent({
  setup() {
    const dateValue = ref();
    const activeKey = ref("1");
    const valueFormat = "YYYY-MM-DD";
    const valueFormatmonth = "YYYY-MM";

    const statusReporttop = reactive({
      statusReport: [{ weight: 0 }, { weight: 0 }, { weight: 0 }],
    });

    const classifyReportObjData = reactive({
      classifyReportObj: {
        obj1: "",
        obj2: "",
        obj3: "",
        obj4: "",
        obj5: "",
      },
    });

    const tabledatas = reactive({ tabledata: [], total: 0 });
    const getclassReport = (params) => {
      medicalWasteApi.classifyReport(params).then((res) => {
        if (res && res.success) {
          let dataList = [];
          dataList = res.data || [];
          let classifyReport = dataList.map((item) => {
            return {
              name: item.classifyName,
              value: item.count,
              weight: item.weight,
            };
          });
          let total = classifyReport.reduce((acc, cur) => {
            return acc + cur.weight;
          }, 0);
          classifyReportObjData.classifyReportObj.obj1 =
            classifyReport.length != 0
              ? ((classifyReport[0].weight / total) * 100).toFixed(2)
              : 0;
          classifyReportObjData.classifyReportObj.obj2 =
            classifyReport.length != 0
              ? ((classifyReport[1].weight / total) * 100).toFixed(2)
              : 0;
          classifyReportObjData.classifyReportObj.obj3 =
            classifyReport.length != 0
              ? ((classifyReport[2].weight / total) * 100).toFixed(2)
              : 0;
          classifyReportObjData.classifyReportObj.obj4 =
            classifyReport.length != 0
              ? ((classifyReport[3].weight / total) * 100).toFixed(2)
              : 0;
          classifyReportObjData.classifyReportObj.obj5 =
            classifyReport.length != 0
              ? ((classifyReport[4].weight / total) * 100).toFixed(2)
              : 0;

          if (classifyReport.length != 0) {
            // this.$nextTick(() => {
            //   // this.$refs.medicalWasteTypes.handleInit(classifyReport);
            // });
          }
        }
      });
    };

    const getTableData = (params) => {
      medicalWasteApi.classifyDepartReport(params).then((res) => {
        if (res && res.success) {
          tabledatas.tabledata = [];
          tabledatas.tabledata = res.data;
        }
      });
    };
    const changeTab = (val) => {
      console.log(1234);
      console.log(val);
      if (activeKey.value == 1) {
        dateValue.value = Utils.parseTime(new Date(), "{y}-{m}-{d}")
      } else if (activeKey.value == 2) {
        dateValue.value = Utils.parseTime(new Date(), "{y}-{m}")
      } else {
        console.log(Utils.parseTime(new Date(), "{y}"));
        dateValue.value = Utils.parseTime(new Date(), "{y}")
      }
      tabledatas.tabledata = [];
      handleGetStatusReport();
    };
    // 导出
    const handleExport = ()=>{
        console.log(1234);
      let params = {
        createTimeEnd: "",
        createTimeStart: "",
      };
      if (activeKey.value == "1") {
        params.createTimeStart = dateValue.value
          ? `${dateValue.value} 00:00:00`
          : "";
        params.createTimeEnd = dateValue.value
          ? `${dateValue.value} 23:59:59`
          : "";
      } else if (activeKey.value == "2") {
        var date = new Date(dateValue.value);
        var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
        var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
        params.createTimeStart = Utils.parseTime(
          new Date(firstDay),
          "{y}-{m}-{d}"
        );
        params.createTimeEnd = Utils.parseTime(
          new Date(lastDay),
          "{y}-{m}-{d}"
        );
      } else {
        params.createTimeStart = dateValue.value
          ? `${Utils.parseTime(new Date(dateValue.value), "{y}")}-01-01`
          : "";
        params.createTimeEnd = dateValue.value
          ? `${Utils.parseTime(new Date(dateValue.value), "{y}")}-12-31`
          : "";
      }
      medicalWasteApi.exportList(params).then((res) => {
        const link = document.createElement("a");
        const blob = new Blob([res], {
          type: "application/vnd.ms-excel", // "application/zip",
        });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.download = "医废报表"; // 下载后文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      });
    }
    // 获取医废状态报表
    const handleGetStatusReport = () => {
      console.log(1234);
      let params = {
        createTimeEnd: "",
        createTimeStart: "",
      };
      if (activeKey.value == "1") {
        params.createTimeStart = dateValue.value
          ? `${dateValue.value} 00:00:00`
          : "";
        params.createTimeEnd = dateValue.value
          ? `${dateValue.value} 23:59:59`
          : "";
      } else if (activeKey.value == "2") {
        var date = new Date(dateValue.value);
        var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
        var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, 0);
        params.createTimeStart = Utils.parseTime(
          new Date(firstDay),
          "{y}-{m}-{d}"
        );
        params.createTimeEnd = Utils.parseTime(
          new Date(lastDay),
          "{y}-{m}-{d}"
        );
      } else {
        params.createTimeStart = dateValue.value
          ? `${Utils.parseTime(new Date(dateValue.value), "{y}")}-01-01`
          : "";
        params.createTimeEnd = dateValue.value
          ? `${Utils.parseTime(new Date(dateValue.value), "{y}")}-12-31`
          : "";
      }
      console.log(params);
      medicalWasteApi.statusReport(params).then((res) => {
        if (res && res.success) {
          statusReporttop.statusReport = [];
          statusReporttop.statusReport =
            res.data && res.data.length == 0
              ? [{ weight: 0 }, { weight: 0 }, { weight: 0 }]
              : res.data;
          console.log(statusReporttop.statusReport);
        }
      });
      getclassReport(params);
      getTableData(params);
    };

    onMounted(() => {
       dateValue.value = Utils.parseTime(new Date(), "{y}-{m}-{d}")
      handleGetStatusReport();
    });

    return {
      dateValue,
      dateOptions,
      valueFormat,
      valueFormatmonth,
      changeTab,
      activeKey,

      ...toRefs(statusReporttop),
      handleGetStatusReport,

      ...toRefs(classifyReportObjData),
      ...toRefs(tabledatas),

      handleExport
    };
  },
});
</script>
<style lang="scss" scoped>
.min_box {
  background: #fff;
  padding: 5px 15px;
}
.bg1 {
  background: url("../../../assets/bg001.png") no-repeat center center;
  background-size: cover;
  padding: 24px 15px;
  color: #fff;
}
.bg2 {
  background: url("../../../assets/bg002.png") no-repeat center center;
  background-size: cover;
  padding: 24px 15px;
  color: #fff;
}
.bg3 {
  background: url("../../../assets/bg003.png") no-repeat center center;
  background-size: cover;
  padding: 24px 15px;
  color: #fff;
}
.flexBox {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ebedf0;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
}
.bg01 {
  background: #5ad8a6;
  width: 5px;
  height: 5px;
  border: 50%;
}
.bg02 {
  background: #6dc8ec;
  width: 5px;
  height: 5px;
  border: 50%;
}
.bg03 {
  background: #5b8ff9;
  width: 5px;
  height: 5px;
  border: 50%;
}
.bg04 {
  background: #f6bd16;
  width: 5px;
  height: 5px;
  border: 50%;
}
.bg05 {
  background: #e86452;
  width: 5px;
  height: 5px;
  border: 50%;
}
</style>